<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="我的资料"
      left-text="返回"
      left-arrow
      @click-left="jump('myView')" />

    <!-- 头像 -->
    <van-cell is-link>
      <van-row type="flex" justify="space-between" @click="heat">
        <van-col span="6">头像</van-col>
        <van-col span="3">
          <van-image
            round
            width="25px"
            height="25px"
            :src="personal.avatar" />
        </van-col>
      </van-row>
    </van-cell>
    <van-popup v-model="showHeat">
      <van-uploader
        v-model="fileList"
        multiple
        :max-count="1"
        :after-read="afterRead"
        preview-size="90px"
        ref="file"
    /></van-popup>
    <!-- 姓名 -->
    <van-cell>
      <van-row type="flex" justify="space-between">
        <van-col span="6">姓名</van-col>
        <van-col span="6">
          <van-cell-group>
            <van-field v-model="personal.smallname" placeholder="用户名" />
          </van-cell-group>
        </van-col>
      </van-row>
    </van-cell>
    <van-cell>
      <van-row type="flex" justify="space-between">
        <van-col span="6">手机号</van-col>
        <van-col span="7">{{ personal.mobile }}</van-col>
      </van-row>
    </van-cell>
    <!-- 生日 -->
    <van-cell is-link>
      <van-row type="flex" justify="space-between" @click="showPopFn()">
        <van-col span="3">生日</van-col>
        <van-col span="6">{{ personal.birthday }}</van-col>
      </van-row>
    </van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @change="changeFn()"
        @confirm="confirmFn()"
        @cancel="cancelFn()" />
    </van-popup>

    <van-button
      type="info"
      style="
        width: 90%;
        border-radius: 20px;
        position: absolute;
        bottom: 20px;
        left: 5%;
      "
      @click="addOrUpdate"
      >保存</van-button
    >
  </div>
</template>

<script>
import axios from "axios";
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式
  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      fileList: [],
      minDate: new Date(1954, 0, 1),
      maxDate: new Date(),
      showHeat: false,
      msg: "",
      currentDate: new Date(),
      changeDate: new Date(),
      show: false, // 用来显示弹出层
      timeValue: "",
      personal: {}, //个人信息
    };
  },
  created() {
    this.loadData();
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    afterRead(file1) {
      // 此时可以自行将文件上传至服务器
      console.log(file1);
      //在这块创建FormData对象
      // FormData 对象的使用：
      // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
      // 2. 异步上传二进制文件。
      //上传图片需要转换二进制这里要用到FormData
      const forms = new FormData();
      //这里的file1表示给后台传的属性名字，这里看接口文档需要传的的属性
      forms.append("file1", file1.file); // 获取上传图片信息
      //向后端发送相应的请求
      //这块的url是具体的交互接口
      //headers是上传图片需要用到的响应头，此处的token是后端那边给设置的，所以我请求的时候需要带上token，
      //token根据实际情况自行添加
      axios
        .post("/user/uploadFile", forms, {
          headers: {
            "content-type": "multipart/form-data",
            token: this.token,
          },
        })
        .then((res) => {
          //如果传入的响应状态码为200，则成功将文件发送给后台
          if (res.data.code === 200) {
            console.log(res);
            this.personal.avatar = res.data.data.filePath;
            this.showHeat = false;
          } else {
            console.log(res.data.msg); //这块是请求失败后台给返回的相应的数据
          }
        });
    },
      //实现用户添加或者更新
    addOrUpdate() {      
      var _this = this;
      this.$http
        .post("/tuser/update", this.personal)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _this.$message({
              message: "提交成功",
              type: "success",
            });
            //原始js重新请求
            location.reload();
          } else {
            _this.$message("操作失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },


    loadData() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get("/tuser/queryBy")
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.personal = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //  方法事件处理
    jump(uri) {
      this.$router.push(uri);
    },
    heat() {
      this.showHeat = true;
    },
    showPopFn() {
      this.show = true;
    },
    showPopup() {
      this.show = true;
    },
    changeFn() {
      // 值变化是触发
      this.changeDate = this.currentDate; // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    confirmFn() {
      // 确定按钮
      this.personal.birthday = this.timeFormat(this.currentDate)+"";
      this.show = false;
    },
    cancelFn() {
      this.show = true;
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "-" + month + "-" + day;
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
  mounted() {
    this.timeFormat(new Date());
  },
};
</script>

<style>
/* 编写样式的 */
</style>
